<template>
    <div class="modify">
        <div class="myinformation el-icon-edit-outline">修改个人信息</div>
        <el-divider></el-divider>
        <div>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="昵称">
                    <el-input v-model="form.name" class="input"></el-input>
                </el-form-item>
                <el-form-item label="个性签名">
                    <el-input type="textarea" v-model="form.introduction"  resize="none"></el-input>
                </el-form-item>
                <el-form-item label="电话号码">
                    {{ form.phoneNumber }}
                </el-form-item>
                <el-form-item label="修改头像">
                    <div>
                        <el-input v-model="form.avatarUrl" class="input" placeholder="请输入头像地址"></el-input>
                    </div>
                    <div>
                        <el-image
                            style="width: 300px; "
                            :src=form.avatarUrl
                            referrerPolicy='no-referrer'
                            fit="fill"></el-image>
                    </div>
                </el-form-item>
                <el-form-item style="text-align: center;margin-bottom:100px;margin-right: 60px;">
                    <el-button type="primary" @click="onSubmit()">提交</el-button>
                </el-form-item>  
            </el-form>
        </div>
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
export default {
    data(){
        return{
            //表单数据
            form: {
                id:sessionStorage.getItem('id'),//id
                name:'',//昵称
                phoneNumber:'',//电话号码
                introduction:'',//个性签名
                avatarUrl:'',//头像地址
            },
        }
    },
    methods:{
        //空方法
        load(){},
        //提交表单
        onSubmit(){
            this.$confirm('您确定要提交吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                     UserManagementApi.SubmitUpdateUser(this.form).then(res => {
                        if(res.data.code == 200){
                            this.$router.go(0)
                        }
                    })
                }).catch(() =>{})
           
        }
    },
    created(){
        var id = sessionStorage.getItem('id')
        var _this = this
        UserManagementApi.SubmitUser(id).then(res => {
            _this.form.name = res.data.data.name
            _this.form.phoneNumber = res.data.data.phoneNumber
            _this.form.avatarUrl = res.data.data.avatarUrl
            _this.form.introduction = res.data.data.introduction
        })
    }
};
</script>

<style scoped>
.modify{
    text-align: left;
    padding: 15px;
}
.myinformation{
    font-size: 200%;
    display: inline-block;
}
.input{
    width: 500px;

}
</style>